<template>
	<view class="content">
		<view class="shiting">
			<view class="ico">
				{{fankui.courseType===1?'试听课程' :'正式课程'}}
			</view>
			<view style="display: flex; justify-content: space-between;margin-top: 70rpx;">
				<text>辅导时长：{{fankui.classHour}}小时</text>
			</view>
			<p style="margin-top: 30rpx;">辅导时间：{{fankui.teachTimeStart}}</p>
		</view>
		<view class="contain">
			<view class="icon">
				辅导内容
			</view>
			<p>{{fankui.teachContent}}</p>
		</view>
		<view class="contain">
			<view class="icon">
				学生课堂表现
			</view>
			<p>{{fankui.classPerformance||'无'}}</p>
		</view>
		<view class="contain">
			<view class="icon">
				课后作业
			</view>
			<p>{{fankui.homeWork||'无'}}</p>
		</view>
		<view class="contain">
			<view class="icon">
				给家长/学生留言
			</view>
			<p>{{fankui.message||'无'}}</p>
		</view>
		<view class="img">
			<view class="icon">
				课堂照片 {{img.length}}/3
			</view>
			<view class="image">
				<image style="width: 187rpx;
				height: 233rpx; margin-right: 27rpx;" :src="item" mode="" v-for="(item,index) in img" :key="item"
					@tap="see(index)"></image>
				<view style="margin: 0 auto;">
					<u-empty v-if="img.length===0" text="无照片" mode="list"></u-empty>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view class="sub" v-if="fankui.courseType===1">
			<view class="no" @tap="nono(fankui.orderId)" v-if="detail.isHire==-1">
				不录用
			</view>
			<view class="yes" v-if="detail.isHire==-1" @tap="buy(fankui.orderId)">
				录用
			</view>
		</view>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="imgs">
					<view style="text-align: center;">
						<p class="text">未录用该老师，</p>
						<p class="text">是否需要重新提交需求</p>
						<p class="text">寻找新的老师?</p>
					</view>
					<view class="view">
						<view class="left" @tap="back">
							返回首页
						</view>
						<view class="right" @tap="fabu">
							重新发布
						</view>
					</view>

				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backId: '',
				fankui: {},
				img: [],
				show: false,
				detail: {},
				id:''
			};
		},
		onLoad(options) {
			this.backId = options.backId
			this.id = options.id
			this.getFankui()
			this.getDetail()
		},
		methods: {
			see(index) {
				console.log(index);
				// var imgArr = [];
				// imgArr.push(this.img);
				// console.log(imgArr)
				uni.previewImage({
					current: index,
					urls: this.img,
					itemList: ['发送给朋友', '保存图片', '收藏']
				})
			},
			back() {
				uni.switchTab({
					url: '/pages/home/homeIndex'
				})
			},
			fabu() {
				uni.switchTab({
					url: '/pages/science/science'
				})
			},			async getDetail() {
				this.detail = await this.$u.api.getOrderDetail({
					id: this.id
				})

			},
			async getFankui() {
				this.fankui = await this.$u.api.getFankui({
					backId: this.backId
				})
				this.img = this.fankui.classPhoto
				if (this.img) {
					this.img = this.img.split(',')
				}
			},
			buy(id) {
				uni.navigateTo({
					url: `/pagesShop/payDetail/onlineBuy?id=${id}`
				})
			},
			async nono(id) {
				this.show = true
				const res = await this.$u.api.no({
					orderId: id
				})
				this.$u.toast('已确定未录用')

			}
		}
	}
</script>

<style lang="scss">
	.warp {
		// padding: 0 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.imgs {
			// padding-top: 270rpx;
			padding: 270rpx 25rpx 0;
			width: 550rpx;
			height: 759rpx;
			background-size: contain;
			background-repeat: no-repeat;
			background-image: url('https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/%E8%AF%B7%E6%B1%82%E5%A4%B1%E8%B4%A5.png');

			.text {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 58rpx;
			}

			.view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 50rpx;

				.left {
					width: 235rpx;
					height: 80rpx;
					background: #FFFFFF;
					border: 1px solid #FF7157;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6C55;
					line-height: 80rpx;
					text-align: center;
					border-radius: 40rpx;
				}

				.right {
					width: 235rpx;
					height: 80rpx;
					background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
					border-radius: 40rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}
			}
		}
	}

	.icon {
		position: absolute;
		top: -32rpx;
		left: 0;
		padding: 14rpx 30rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF6B55;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url('');
	}

	.content {
		padding: 100rpx 30rpx 100rpx;

		.shiting {
			position: relative;
			height: 224rpx;
			background: #FFFFFF;
			border: 1px solid #EEEEEE;
			box-shadow: 0rpx 4rpx 27rpx 0rpx rgba(141, 141, 141, 0.14);
			border-radius: 20rpx;
			padding: 0 182rpx 0 37rpx;

			text {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			p {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.ico {
				position: absolute;
				top: -32rpx;
				left: 50%;
				transform: translate(-50%);
				width: 164rpx;
				height: 55rpx;
				text-align: center;
				line-height: 55rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF6B55;
				background-size: contain;
				background-repeat: no-repeat;
				background-image: url('');
			}
		}

		.contain {
			position: relative;
			margin-top: 80rpx;
			background: #FFFFFF;
			border: 1px solid #EEEEEE;
			box-shadow: 0rpx 4rpx 27rpx 0rpx rgba(141, 141, 141, 0.14);
			border-radius: 20rpx;
			padding: 75rpx 57rpx 70rpx 37rpx;
		}

		.img {
			margin-top: 80rpx;
			padding: 0 38rpx;
			position: relative;
			height: 363rpx;
			background: #FFFFFF;
			border: 1px solid #EEEEEE;
			box-shadow: 0rpx 4rpx 27rpx 0rpx rgba(141, 141, 141, 0.14);
			border-radius: 20rpx;

			.image {
				margin-top: 65rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.sub {
			margin-top: 50rpx;
			padding: 20rpx 80rpx 30rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			background-color: #fff;
			bottom: 0rpx;
			left: 0rpx;
			width: 100%;
			.no {
				width: 45%;
				height: 80rpx;
				background: #FFFFFF;
				border: 1px solid #FF7157;
				border-radius: 40rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF6C55;
				text-align: center;
				line-height: 80rpx;
				margin-right: 10rpx;
			}

			.yes {
				width: 45%;
				height: 80rpx;
				background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
				border-radius: 40rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-left: 15rpx;
			}
		}
	}
</style>